<template>
    <div class="demo-basic">
        <ul class="up-down-list">
            <li v-for="(item, index) in totalData" :key="index">
                <span class="left">
                    <h3>{{ item.alias }}</h3>
                </span>
                <span class="right">{{ item.comment }}</span>
                <p v-for="(p, key) in item.params" :key="key">{{ p }}</p>
                <br><b>用法:</b><br>
                <pre>
                    <code>
        {{ item.example }}
                    </code>
                </pre>
            </li>
        </ul>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data: function () {
            return {
                totalData: [
                    {
                        alias: 'border-dashed($position, $color, $width)',
                        comment: '虚边线',
                        params: [
                            '$position: border方向,默认"bottom"',
                            '$color: border-color,默认rgba(221,221,221,1)',
                            '$width: border-width,默认"1px"'
                        ],
                        example: `<style lang="scss">
            @import 'styleKit.scss';
            .demo {
                @include border-dashed(bottom, rgba(220,200,200,1));
            }
        </style>`
                    },
                    {
                        alias: 'border-top-dashed($color, $width)',
                        comment: '顶部虚边线',
                        params: [
                            '$color: border-color,默认rgba(221,221,221,1)',
                            '$width: border-width,默认"1px"'
                        ],
                        example: `<style lang="scss">
            @import 'styleKit.scss';
            .demo {
                @include border-top-dashed();
            }
        </style>`
                    },
                    {
                        alias: 'border-bottom-dashed($color, $width)',
                        comment: '底部虚边线',
                        params: [
                            '$color: border-color,默认rgba(221,221,221,1)',
                            '$width: border-width,默认"1px"'
                        ],
                        example: `<style lang="scss">
            @import 'styleKit.scss';
            .demo {
                @include border-bottom-dashed();
            }
        </style>`
                    }
                ]
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

<style lang="scss">
    @import 'styleKit.scss';
    .up-down-list {
        span {
            &.left {
                display: inline-block;
                width: 500px;
            }
        }
        p {
            text-indent: 2em;
        }
    }
</style>
